import * as React from 'react';

interface SelectProps {
  label: string;
  htmlFor: string;
  options: Array<{ value: string; label: string }>;
  changeOption: (
    selectedValue: string,
    selectedLabel: string,
    id: string
  ) => void;
}
export function Select({ label, htmlFor, options, changeOption }: SelectProps) {
  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = event.target.value;
    const selectedOption = options.find(
      option => option.value === selectedValue
    );
    if (selectedOption) {
      changeOption(selectedValue, selectedOption.label, htmlFor);
    }
  };

  return (
    <div className="selector">
      <label className="label" htmlFor={htmlFor}>
        {label + ':'}
      </label>
      <select className="select" id={htmlFor} onChange={handleSelectChange}>
        {options.map((option, index) => (
          <option key={index} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <style jsx>{`
        .selector {
          display: inline-block;
          font-size: 13px;
        }
        .label {
          font-size: 15px;
          margin-right: 12px;
        }
        .select {
          min-width: 150px;
          padding: 4px 8px;
          border-radius: 8px;
          border: 1px solid var(--color-gray-6);
        }
        .select:hover {
          cursor: pointer;
          border: 1px solid var(--color-gray-7);
        }
        .select:focus {
          cursor: pointer;
          border: 2px solid var(--color-geekblue-9);
          outline: 3px solid var(--color-geekblue-2);
        }
      `}</style>
    </div>
  );
}
